<template>
	<div>
		<Echart :options="options" id="pie_b" ref="pie_b" height="240px" width="100%"></Echart>
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		data() {
			return {
				options: {},
			};
		},
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		watch: {
			cdata: {
				handler(newData) {
					this.options = {
						legend: {
							show: false
						},
						toolbox: {
							show: false,
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)',
							position: 'top'
						},
						series: [{
							name: newData.name,
							type: 'pie',
							radius: '50%',
							data: newData.seriesData,
							label: {
								color: "#fff",
								fontSize: 14
							},
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					// 自动循环tooltip
					this.$nextTick(() => {
						try {
							const pie_chart = this.$refs.pie_b.chart;
							let currentIndex = -1;
							setInterval(function() {
								var dataLen = newData.seriesData.length;
								// 取消之前高亮的图形
								pie_chart.dispatchAction({
									type: 'downplay',
									seriesIndex: 0,
									dataIndex: currentIndex
								});
								currentIndex = (currentIndex + 1) % dataLen;
								// 高亮当前图形
								pie_chart.dispatchAction({
									type: 'highlight',
									seriesIndex: 0,
									dataIndex: currentIndex
								});
								// 显示 tooltip
								pie_chart.dispatchAction({
									type: 'showTip',
									seriesIndex: 0,
									dataIndex: currentIndex
								});
							}, 1500);

						} catch (error) {
							console.log(error)
						}
					});
				},
				immediate: true,
				deep: true
			}
		},
		methods: {

		}
	};
</script>

<style scoped>
</style>
